<style>
.navbar-default {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-default .navbar-brand {
    color: #ecf0f1 !important;
    font-weight: 700;
    font-size: 20px;
}

.navbar-default .navbar-nav > li > a {
    color: #bdc3c7 !important;
    transition: all 0.3s ease;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #3498db !important;
    background: rgba(52, 152, 219, 0.1) !important;
}

.navbar-default .navbar-nav > .dropdown > a:hover {
    background: rgba(52, 152, 219, 0.1) !important;
}

.dropdown-menu {
    border-radius: 8px;
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.dropdown-menu > li > a {
    transition: all 0.3s ease;
}

.dropdown-menu > li > a:hover {
    background: #3498db;
    color: white;
}
</style>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/main/home/"><i class="fas fa-store"></i> 管理系统</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="{% url 'main:dashboard' %}"><i class="fas fa-chart-line"></i> 仪表板</a></li>
        <li><a href="{% url 'main:home' %}"><i class="fas fa-box"></i> 商品列表</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cogs"></i> 商品管理 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="{% url 'main:category' %}"><i class="fas fa-tags"></i> 商品分类</a></li>
            <li><a href="{% url 'main:product_images' %}"><i class="fas fa-images"></i> 商品图片</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-users"></i> 用户管理 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="{% url 'main:user_list' %}"><i class="fas fa-user-friends"></i> 用户列表</a></li>
            <li><a href="{% url 'main:address_list' %}"><i class="fas fa-map-marker-alt"></i> 收货地址</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> 订单管理 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="{% url 'main:order_list' %}"><i class="fas fa-list-alt"></i> 订单列表</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
          {% if request.user.is_authenticated %}
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user-circle"></i> {{ request.user }} <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="{% url 'user:center' %}"><i class="fas fa-home"></i> 个人中心</a></li>
                <li><a href="{% url 'user:changepwd' %}"><i class="fas fa-key"></i> 修改密码</a></li>
                <li><a href="{% url 'user:changehead' %}"><i class="fas fa-camera"></i> 修改头像</a></li>
                <li><a href="{% url 'user:changeinfo' %}"><i class="fas fa-edit"></i> 修改信息</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="{% url 'user:logout' %}"><i class="fas fa-sign-out-alt"></i> 退出</a></li>
              </ul>
            </li>
          {% else %}
            <li><a href="{% url 'user:login' %}"><i class="fas fa-sign-in-alt"></i> 登录</a></li>
            <li><a href="{% url 'user:regist' %}"><i class="fas fa-user-plus"></i> 注册</a></li>
          {% endif %}
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>